<template>
  <div class="my-home">
    <div class="home-body">
      <div class="content">
        <div class="cont-head">
          <span
              class="nav-item"
              :class="{ 'nav-active': navActive == '首页' }"
              @click="tabsMenu(false, '首页')"
          ><i class="el-icon-location"></i>&nbsp;首页</span
          >
          <span
              class="nav-item"
              :class="{ 'nav-active': navActive == item.name }"
              v-for="item in topMenuArr"
              @click="tabsMenu(true, item.name, item.openUrl)"
          >{{ item.name }}</span
          >
          <!-- <span class="nav-item" >表单</span> -->
        </div>
        <div class="cont-body" v-if="!isFrame">
          <div class="cont-left custom-tabs-ui">
            <el-tabs @tab-click="tabsTable">
              <el-tab-pane>
                <span slot="label">
                  <span
                      class="tab-title"
                      :class="{ 'tab-dot': tabArr[0].isDot }"
                  >我的日程</span
                  >
                </span>
                <div class="calendar-box">
                  <lunar-calendar @message-for-calendar="messageDate"/>
                </div>
                <div class="schedule-box">
                  <Schedule ref="selectDate" @dataFromChild="receiveData"/>
                </div>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label">
                  <span class="tab-title">通用功能</span>
                </span>
                <common-tool
                    @searchCommonMenuToolFn="searchCommonMenuToolFn"
                ></common-tool>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="cont-center custom-tabs-ui">
            <el-tabs v-model="activeName" @tab-click="tabsTabletask">
              <el-tab-pane label="我的待办" name="first">
                <div class="infinite-list-wrapper" style="overflow: auto">
                  <wait-task
                      :showAll="taskObj.showAll"
                      :tableData="waitObj.tableData"
                      @loadTableFn="handleScroll"
                      @searchTaskFn="searchTaskFn"
                  ></wait-task>
                </div>
              </el-tab-pane>
              <el-tab-pane label="我的已办" name="second">
                <handle-task
                    :showAll="taskObj.showAll"
                    :tableData="handleObj.tableData"
                    @loadTableFn="handleScroll"
                    @searchTaskFn="searchTaskFn"
                ></handle-task>
              </el-tab-pane>
              <el-tab-pane label="我的发起" name="third">
                <div class="table-box">
                  <create-task
                      :showAll="taskObj.showAll"
                      :tableData="createObj.tableData"
                      @loadTableFn="handleScroll"
                      @searchTaskFn="searchTaskFn"
                      @urgeTaskSearchFn="urgeTaskSearchFn"
                  ></create-task>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="cont-right">
            <my-task ref="taskNum"></my-task>
            <common-menu ref="commonMenuRef"></common-menu>
            <help-file></help-file>
          </div>
        </div>
      </div>
      <div class="footer" v-if="!isFrame">
        <ApplicatInlet/>
      </div>
      <iframe
          v-if="isFrame"
          ref="iframe"
          :src="iframeUrl"
          frameborder="0"
          scrolling="no"
          width="100%"
          :height="scrollHeight"
      ></iframe>
    </div>
    <div class="home-message" v-show="messageDialogVisible">
      <div class="message-pro" style="position: relative;">
        <div class="close-box" @click="showMessageFn(false)">
          <i class="el-icon-close"></i>
        </div>
        <message-box :messageObj="messageObj" @closeParternMessageFn="showMessageFn"></message-box>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Schedule from "../components/Schedule.vue";
import MyTask from "../components/MyTask.vue";
import lunarCalendar from "../components/MyAddCalendar.vue";
import CommonMenu from "@/components/CommonMenu.vue";
import HelpFile from "@/components/HelpFile.vue";
import ApplicatInlet from "@/components/ApplicatInlet.vue";
import CommonTool from "@/components/CommonTool.vue";
import WaitTask from "@/components/WaitTask.vue";
import HandleTask from "@/components/HandleTask.vue";
import CreateTask from "@/components/CreateTask.vue";
import MessageBox from "@/components/MessageBox.vue";
import {EventBus} from "../components/event-bus.js";
import {
  getWaitTaskApi,
  getHandleTaskApi,
  getCreateTaskApi,
  getTopUrlApi,
  getNewMessageApi,
  getMessageAllApi, getUserSession,
} from "../api/myHome";

export default {
  name: "",
  mixins: [],
  components: {
    Header,
    Schedule,
    MyTask,
    CommonMenu,
    HelpFile,
    ApplicatInlet,
    CommonTool,
    WaitTask,
    HandleTask,
    CreateTask,
    lunarCalendar,
    MessageBox,
  },
  props: {},
  data() {
    return {
      timer: null,
      count: 0,
      testloading: false,

      sid: this._sid,
      portalUrl: this._portalUrl,
      taskObj: {
        showAll: true,
        dialog: true,
      },
      topMenuArr: [],
      isFrame: false,
      iframeUrl: null,
      navActive: "首页",
      nav: "首页",
      navList: ["首页", "流程", "表单"],
      tabArr: [
        {title: "我的日程", isDot: false},
        {title: "通用功能", isDot: false},
      ],
      tabActive: "我的日程",
      activeName: "first",
      tableData: [],
      waitObj: {
        query: {
          nowPage: 1,
          pageNum: 20,
          fieldQuery: {
            processTitle: "",
            processType: "",
            owerName: "",
            isYq: false,
            releaseTime: {
              beginTime: null,
              endTime: null,
            },
          },
          order: {
            processTitle: "",
            processType: "",
            owerName: "",
            arravieTime: "",
          },
        },
        totalNum: 0,
        tableData: [],
      },
      handleObj: {
        query: {
          nowPage: 1,
          pageNum: 20,
          fieldQuery: {
            processTitle: "",
            processType: "",
            processCreateUser: "",
            processState: "",
            releaseTime: {
              beginTime: "",
              endTime: "",
            },
          },
          order: {
            processTitle: "",
            processType: "",
            processCreateUser: "",
            processState: "",
            trackTime: "",
          },
        },
        totalNum: 0,
        tableData: [],
      },
      createObj: {
        query: {
          nowPage: 1,
          pageNum: 20,
          fieldQuery: {
            processTitle: "",
            processType: "",
            targetUser: "",
            processState: "",
            dataInfo: "",
            releaseTime: {
              beginTime: "",
              endTime: "",
            },
          },
          order: {
            processTitle: "",
            processType: "",
            targetUser: "",
            processState: "",
            dataInfo: "",
          },
        },
        totalNum: 0,
        tableData: [],
      },
      scrollHeight: "460px",
      testShow: false,
      message: "",
      countset: 0, // 用于计数触发次数
      timerset: null, // 保存定时器引用
      srcolltype: "",
      activetitle: '我的待办',
      messageDialogVisible: false,
      messageObj: {}
    };
  },
  computed: {
    noMore() {
      return this.count >= 120;
    },
    disabled() {
      return this.testloading || this.noMore;
    },
  },
  watch: {},
  created() {
  },
  mounted() {
    // this.getHomeBg()
    // this.$notify.closeAll();
    this.getTopMenuFn();
    this.getWaitTaskFn(this.waitObj.query);
    this.getHandleTaskFn(this.handleObj.query);
    this.getCreateTaskFn(this.createObj.query);
    // this.getNewMessageFn()
    // this.timer = setInterval(() => {
    //   this.$notify.closeAll()
    //   this.getNewMessageFn();
    // }, 3000);
    this.getNewMessageFn();

    // 每 3 秒触发一次
    this.timerset = setInterval(() => {
      this.getUserSession();
      this.getNewMessageFn()
    }, 5000); // 3000 毫秒 = 3 秒


    EventBus.$on("messageURL", (msg) => {
      this.navActive = "消息";
      this.isFrame = true;
      this.iframeUrl = msg;
      //console.log(msg,'msg的数据！')
    });
  },
  beforeDestroy() {
    EventBus.$off("messageURL");
  },
  methods: {
    messageDate(message) {
      console.log(message, "message");
      this.tabArr[0].isDot = message != "" ? true : false;
      this.$refs.selectDate.messageDate(message);
    },
    getNewMessageFn() {
      getNewMessageApi(this.sid).then((res) => {
        if (res.result == "ok") {
          if (res.data.list.length > 0) {
            this.showNewMessageFn(res.data.list[0], res.data.amount);
          }
        }
      });
    },
    showNewMessageFn(item, amount) {
      let iconUrl = window.portalUrl;
      console.log(iconUrl, "iconUrl");
      if (item.icon.startsWith("./")) {
        iconUrl = "/portal/r" + item.icon.substring(1);
      } else {
        iconUrl = "/portal/r" + item.icon.substring(1);
      }
      this.messageObj =  {
        num: amount,
        content: item.content,
        contentType: item.systemName,
        name: item.userName,
        time: item.createTime,
        iconUrl: iconUrl,
        itemObj: item,
      }
   
      // 从vuex获取值对比
      let obj =  {num: this.messageObj.num, change: true, content: this.messageObj.content}
      if(this.messageObj.content != this.$store.state.messageObj.content) {
        this.showMessageFn(true)
      }else{
        obj.change = false
      }
      this.$store.commit('setMessageStore', obj)
      // this.$notify({
      //   dangerouslyUseHTMLString: true,
      //   customClass: "message-pro",
      //   message: this.$createElement("MessageBox", {
      //     ref: "messageBox",
      //     props: {
      //       messageObj: {
      //         num: amount,
      //         content: item.content,
      //         contentType: item.systemName,
      //         name: item.userName,
      //         time: item.createTime,
      //         iconUrl: iconUrl,
      //         itemObj: item,
      //       }
      //     },
      //   }),
      //    position: 'bottom-right',
      //   duration: 0,
      // });
    },
    showMessageFn(bool) {
      this.messageDialogVisible = bool
    },  
    tabs(item) {
      this.tabActive = item.title;
    },
    getScrollHeight() {
      let iframe = this.$refs.iframe;
      let height = window.innerHeight;
      this.scrollHeight = height - 130 + "px";
      console.log("scrollHeight: ", this.scrollHeight);
    },
    openApplicate(url) {
      Window.open(url);
    },
    tabsTable(tab, event) {
      console.log(tab, event);
      this.testShow = true;
    },
    tabsTabletask(tab, event) {
      console.log(tab, event);
      this.activetitle = tab.label;
      this.testShow = true;
    },
    getUserSession(){
      let that = this
      getUserSession(this.sid).then(res =>{
        if (res.result == "ok"){
          var result = res.data;
          if (result=="1"){
            //刷新待办
            that.getWaitTaskFn(that.waitObj.query);
            that.getCreateTaskFn(that.createObj.query);
            this.$refs.taskNum.getTaskNumFn();
          }
        }
      })
    },
    getWaitTaskFn(params) {
      console.log('3')
      getWaitTaskApi(this.sid, JSON.stringify(params)).then((res) => {
        if (res.result == "ok") {
          if (this.waitObj.query.nowPage == 1) {
            this.waitObj.tableData = res.data.list;
          } else {
            this.waitObj.tableData = this.waitObj.tableData.concat(
                res.data.list
            );
          }
          this.waitObj.totalNum = res.data.totalNum;
        }
      });
    },
    getHandleTaskFn(params) {
      console.log('2')
      getHandleTaskApi(this.sid, JSON.stringify(params)).then((res) => {
        if (res.result == "ok") {
          if (this.handleObj.query.nowPage == 1) {
            this.handleObj.tableData = res.data.list;
          } else {
            this.handleObj.tableData = this.handleObj.tableData.concat(
                res.data.list
            );
          }
          this.handleObj.totalNum = res.data.totalNum;
          console.log("11", this.handleObj);
        }
      });
    },
    getCreateTaskFn(params) {
      console.log('1')
      getCreateTaskApi(this.sid, JSON.stringify(params)).then((res) => {
        if (res.result == "ok") {
          if (this.createObj.query.nowPage == 1) {
            this.createObj.tableData = res.data.list;
          } else {
            this.createObj.tableData = this.createObj.tableData.concat(
                res.data.list
            );
          }
          this.createObj.totalNum = res.data.totalNum;
        }
      });
    },
    getTopMenuFn() {
      getTopUrlApi(this.sid).then((res) => {
        if (res.result == "ok") {
          this.topMenuArr = res.data;
          console.log("1111", res);
        }
      });
    },
    handleScroll(type) {
      // this.createObj.query.nowPage++
      // this.getCreateTaskFn(this.createObj.query)
      console.log("1111222", type);
      this.srcolltype = type;
      if (type == "wait") {
        let num = this.waitObj.query.nowPage * this.waitObj.query.pageNum;
        if (num < this.waitObj.totalNum) {
          this.waitObj.query.nowPage++;
          this.getWaitTaskFn(this.waitObj.query);
        }
      } else if (type == "handle") {
        let num = this.handleObj.query.nowPage * this.handleObj.query.pageNum;
        if (num < this.handleObj.totalNum) {
          this.handleObj.query.nowPage++;
          this.getHandleTaskFn(this.handleObj.query);
        }
      } else if (type == "create") {
        let num = this.createObj.query.nowPage * this.createObj.query.pageNum;
        if (num < this.createObj.totalNum) {
          this.createObj.query.nowPage++;
          this.getCreateTaskFn(this.createObj.query);
        }
      }
    },

    tabsMenu(bool, title, url) {
      this.isFrame = bool;
      this.navActive = title;
      if (bool) {
        this.iframeUrl = url;
        this.getScrollHeight();
      } else {
        // location.reload();
        this.$forceUpdate()
      }
    },
    searchTaskFn(obj) {
      if (obj.type == "create") {
        this.createObj.query.order[obj.column.prop] = obj.column.selectedSort;
        this.createObj.query.fieldQuery[obj.column.prop] =
            obj.column.filterKeyword;
        this.createObj.query.nowPage = 1;
        this.getCreateTaskFn(this.createObj.query);
      } else if (obj.type == "wait") {
        this.waitObj.query.order[obj.column.prop] = obj.column.selectedSort;
        this.waitObj.query.fieldQuery[obj.column.prop] =
            obj.column.filterKeyword;
        this.waitObj.query.nowPage = 1;
        console.log("this.waitObj.query", this.waitObj);
        this.getWaitTaskFn(this.waitObj.query);
      } else if (obj.type == "handle") {
        this.handleObj.query.order[obj.column.prop] = obj.column.selectedSort;
        this.handleObj.query.fieldQuery[obj.column.prop] =
            obj.column.filterKeyword;
        this.handleObj.query.nowPage = 1;
        this.getHandleTaskFn(this.handleObj.query);
      }
    },
    // searchCommonMenuFn() {
    //   this.$refs.commonMenuRef.getCommonMenuFn()
    // },
    searchCommonMenuToolFn() {
      this.$refs.commonMenuRef.getCommonMenuFn();
    },
    urgeTaskSearchFn() {
      // this.createObj.query.nowPage = 1
      // this.getCreateTaskFn(this.createObj.query)
    },
    receiveData(data) {
      // 更新父组件的数据
      // this.childData = data;
      console.log(data, "data");
      this.tabArr[0].isDot = !data;
    },
  },
};
</script>

<style scoped lang="scss">
@import "../style/common.scss";
// @import '../style/awsui.css';
// $active-color: #2c64df;
// $nav-color: #5d5d5d;
// $min-size: 0.1777777778rem;
// $small-size: 0.2222222222rem;
// $tabs-size: 0.24rem;
// $line-size: 0.0111111111rem;
// $radius: 0.0666666667rem;
// $radius2: 0.12rem;
// $pad-top: 0.1rem;
// $pad-default: 0.1rem;
// $mar-right: 0.23rem;
.home-body {
  background-image: linear-gradient(to bottom, #f0f3f8, #ecf1fa);
  min-height: calc(100vh - 1rem);
  padding: 0 0.32rem 0.32rem 0.32rem;
}

.content {
  .cont-head {
    padding: 0.28rem 0;
    font-size: $min-size;
    text-align: left;

    .nav-item {
      cursor: pointer;
      font-size: 0.2rem;
      box-shadow: 0.1rem 0.1rem 0.1rem #ebebeb;
      background-color: #fff;
      border-radius: $radius2;
      padding: 0.1rem 0.4rem;
      margin-right: 0.15rem;
      color: $nav-color;
    }

    .nav-active {
      border: $line-size solid $active-color;
      color: $active-color;
    }
  }

  .cont-body {
    margin-bottom: $pad-top;
    display: flex;
    justify-content: center;
    font-size: $small-size;

    .cont-left {
      margin-right: $mar-right;
      overflow: hidden;
      flex: 0 0 4.5rem;
      background-color: #f8fafd;
      border-radius: $radius2;

      .tab-title {
        position: relative;
        padding: 0.05rem 0.2rem;
        cursor: pointer;
      }

      .tab-active {
        font-size: $tabs-size;
        font-weight: bold;
        color: #333;

        &:before {
          content: "";
          position: absolute;
          height: 0.06rem;
          left: 30%;
          right: 30%;
          bottom: -0.1rem;
          background-color: $active-color;
          border-radius: 0.2rem;
        }
      }

      .tab-dot {
        &:after {
          content: "";
          position: absolute;
          top: -0.015rem;
          right: 0.1rem;
          width: 0.08rem;
          height: 0.08rem;
          background-color: #f32f2f;
          border-radius: 100%;
        }
      }

      .calendar-box {
        height: 4rem;
        border: 1px solid #f1f1f1;
      }

      .schedule-box {
        margin-top: 0.22rem;
        padding: 0 $pad-insert;
      }
    }

    .cont-center {
      width: 100%;
      overflow: auto;
      margin-right: $mar-right;
      background-color: #fbfcfd;
      border-radius: $radius2;
      padding: 0.08rem $pad-insert $pad-insert $pad-insert;

      .table-box {
        overflow: hidden;
        max-height: 8rem;
      }
    }

    .cont-right {
      margin-right: 0;
      flex: 0 0 4.5rem;
      width: 4.5rem;
    }
  }
}
.home-message {
  position: fixed;
  bottom: 0.32rem;
  right: 0.32rem;
  padding: 0.25rem 0.15rem;
  width: 5.8rem;
  display: flex;
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid #EBEEF5;
  position: fixed;
  background-color: #FFF;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  -webkit-transition: opacity .3s, left .3s, right .3s, top .4s, bottom .3s, -webkit-transform .3s;
  transition: opacity .3s, left .3s, right .3s, top .4s, bottom .3s, -webkit-transform .3s;
  transition: opacity .3s, transform .3s, left .3s, right .3s, top .4s, bottom .3s;
  transition: opacity .3s, transform .3s, left .3s, right .3s, top .4s, bottom .3s, -webkit-transform .3s;
  overflow: hidden;
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  0% {
    /* 右边 */
    right:-5.8rem;
  }
  100% {
    /* 左边 */
    right: 0.32rem;
  }
                    
}
</style>
